<template>
  <div class="todo-item" :class="{ done: todoItem.completed }">
    <label>
      <input
        type="checkbox"
        :checked="todoItem.completed"
        @click="$emit('change-state', $event)"
      />
      {{ todoItem.content }}
      <span class="check-button"></span>
    </label>
  </div>
</template>

<script setup>
const props = defineProps({
  todoItem: Object,
});
</script>

<style scoped>
.done {
  text-decoration: line-through;
  font-style: italic;
}
</style>
